<template>
  <div class="container">
    <div class="container__header">
      <Header :currentId="5" />
    </div>
    <div class="container__content__opration">
      <div class="justify-start">
        <date-tab ref="reset" @selectDate="handleSelectDate"></date-tab>
<!--        <div class="select-type">-->
<!--          <span>区域</span>-->
<!--          <el-select @change="selectChanged" v-model="serviceType" placeholder="请选择" size="medium" style="background-color: transparent">-->
<!--            <el-option v-for="item in serviceList" :key="item.id" :label="item.zoneName" :value="item.id">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
      </div>

      <div class="opration-btn">
        <span class="opration-btn__search" @click="areaFlowDerivation()">导出</span>
      </div>
    </div>
    <div class="container__video " style="">
      <div class="container__video__left" v-for="item in trafficList" :key="item.id">
        <div class="front justify-between">
          <div class="align-center">
            <img src="@/assets/biaoti@2x.png" />
            <span class="font18">{{ item.zoneName }}实时人数</span>
          </div>
          <div>
            <span class="user-num">{{ item.flowNum}} </span>
            <span>人</span>
          </div>
        </div>
        <div class="video">
          <img :src="`data:image/jpeg;base64,${item.imageData}`" />
        </div>
      </div>
    </div>
    <div class="container__chart">
      <div class="front align-center">
        <img src="@/assets/biaoti@2x.png" />
        <span class="font18">区域流量趋势图</span>
      </div>

      <div class="chart-box justify-between">
        <div class="chart-box__left">
          <bar-echart :echartObj="dayEchartObj" v-if="dayEchartObj.series  !== null "></bar-echart>
          <div v-else>
            <div class="title">{{dayEchartObj.title}}</div>
            <not-found :text="title.day"></not-found>
          </div>
        </div>
        <div class="chart-box__right">
          <bar-echart :echartObj="weekEcharObj" v-if="weekEcharObj.series  !== null "></bar-echart>
          <div v-else>
            <div class="title">{{weekEcharObj.title}}</div>
            <not-found :text="title.week"></not-found>
          </div>
        </div>
      </div>
    </div>
    <div class="container__chart">
      <div class="front align-center">
        <img src="@/assets/biaoti@2x.png" />
        <span class="font18">区域流量趋势图</span>
      </div>

      <div class="chart-box justify-between">
        <div class="chart-box__right">
          <bar-echart :echartObj="monthEchartObj" v-if="monthEchartObj.series !== null "></bar-echart>
          <div v-else>
            <div class="title">{{this.monthEchartObj.title}}</div>
            <not-found :text="title.month"></not-found>
          </div>
        </div>
        <div class="chart-box__right">
          <bar-echart :echartObj="threeMonthEchartObj" v-if="threeMonthEchartObj.series !== null "></bar-echart>
          <div v-else>
            <div class="title">{{this.threeMonthEchartObj.title}}</div>
            <not-found :text="title.threeMonth"></not-found>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import BarEchart from "@/components/BarEchart.vue";
import { mapState } from "vuex";

import {
  getFlowList,
  getCurrentDayFlowList,
  getLatestWeekFlow,
  getLatestMonthFlow,
  getLatestThreeMonthFlow, getServiceList,
  areaFlowDerivation
} from "@/api/home";
import NotFound from "@/views/common/NotFound.vue";
import DateTab from "@/components/DateTab.vue";
import {getStamp} from "@/utils/getTime"
export default {
  name: "TrafficView",
  components: {
    DateTab,
    Header,
    BarEchart,
    NotFound
  },
  computed: {
    ...mapState("message", ["socket"]),
    ...mapState("message", ["trafficList"])
  },
  data() {
    return {
      startTime:'',
      endTime:'',
      dateType: 3,
      serviceType:'',
      serviceList: [], //服务列表
      flowList: [],
      threeMonthEchartObj: {},
      monthEchartObj: {},
      weekEcharObj: {},
      dayEchartObj: {},
      title: {
        day: "近日暂无数据",
        week: "近一周暂无数据",
        month: "近一月暂无数据",
        threeMonth: "近三月暂无数据"
      },
      interval: null
    };
  },

  mounted() {
    // this.getFlowListArr();
    // this.getCurrentDayFlowList();
    // this.getLatestMonthFlow();
    // this.getLatestThreeMonthFlow();
    // this.getLatestWeekFlow();
    this.getServiceList();
    this.flowList = this.trafficList;
    this.interval = setInterval(() => {
      this.flowList = [];
      this.flowList = this.trafficList;
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    selectChanged(){
      this.searchList();
    },
    //服务检索类型
    async getServiceList() {
      let res = await getServiceList();
      if (res.code == 200) {
        this.serviceList = res.data;
      }
      this.serviceList.unshift({id: '',zoneName:'全部'})
    },

   // 导出
    async areaFlowDerivation() {
      let query = {
        startTime:getStamp(this.startTime),
        endTime:getStamp(this.endTime),
        zoneId:this.serviceType
      }

      let res = await areaFlowDerivation(query);
      if (res) {
        const startTimeDate = this.startTime;
        const endTimeDate = this.endTime;
        let data = "区域人流量" + startTimeDate + "至" + endTimeDate + "data.xlsx"
        const blob = new Blob([res], {
          type:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
        });
        try {
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, data);
          } else {
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = data; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
            this.$message.success("导出成功");

          }
        }catch (e) {
          this.$message.error("导出失败");
        }
      }
    },

    //日期选择器返回的时间
    handleSelectDate(e) {
      this.startTime = e.date[0];
      this.endTime = e.date[1];
      this.dateType = e.dateType;
      this.searchList();
    },
    async getFlowListArr() {
      let res = await getFlowList();
      if (res.code == 200) {
        this.flowList = res.data;
      }
    },

    searchList() {
      this.getCurrentDayFlowList();
      this.getLatestWeekFlow();
      this.getLatestMonthFlow();
      this.getLatestThreeMonthFlow();
    },

    async getCurrentDayFlowList() {
      let res = await getCurrentDayFlowList();
      if (res.code === 200) {
        console.log(res.data);
        this.dayEchartObj = {
          data: res.data && res.data.legend,
          xAxis: res.data && res.data.xdata,
          color: ["#E6873A", "#E5403D", "#E5BA4A", "#3AD76E"],
          unit: "人",
          title: "当天的流量趋势图",
          bottom: 10,
          series: res.data && res.data.series
        };
        console.log(this.dayEchartObj);
      }
    },

    async getLatestWeekFlow() {
      let res = await getLatestWeekFlow();
      if (res.code === 200) {
        this.weekEcharObj = {
          data: res.data && res.data.legend,
          xAxis: res.data && res.data.xdata,
          color: ["#E5403D", "#E5BA4A", "#E6873A", "#3AD76E"],
          unit: "人",
          title: "最近一周的流量趋势图",
          bottom: 10,
          series: res.data && res.data.series
        };
      }
    },

    async getLatestMonthFlow() {
      let res = await getLatestMonthFlow();
      if (res.code == 200) {
        console.log(res.data, "month");
        this.monthEchartObj = {
          data: res.data && res.data.legend,
          xAxis: res.data && res.data.xdata,
          color: ["#3AD76E", "#E5BA4A", "#E5403D", "#E6873A"],
          unit: "人",
          title: "最近一个月的流量趋势图",
          bottom: 10,
          series: res.data && res.data.series
        };
      }
    },

    async getLatestThreeMonthFlow() {
      let res = await getLatestThreeMonthFlow();
      if (res.code == 200) {
        this.threeMonthEchartObj = {
          data: res.data && res.data.legend,
          xAxis: res.data && res.data.xdata,
          color: ["#E5BA4A", "#E6873A", "#E5403D", "#3AD76E"],
          unit: "人",
          title: "最近三个月的流量趋势图",
          bottom: 10,
          series: res.data && res.data.series
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .container__video {
    width: calc(100% - 32px);
    display: flex;
    overflow-x: auto;
    margin: 20px 16px;
  }
  .font18 {
    font-size: 18px;
  }

  .front {
    color: #fff;
    box-sizing: border-box;
    padding: 12px 24px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }
  &__video {
    margin: 16px auto;
    border-radius: 8px;
    width: 100%;
    flex-wrap: wrap;
    &__left {
      // width: 936px;
      height: 600px;
      background-color: #303136;
      border-radius: 8px;
      margin-right: 10px;
      width: calc(50% - 10px);
      margin-bottom: 10px;
      .front {
        .user-num {
          color: #fff938;
          font-size: 36px;
          font-weight: bold;
          padding-right: 5px;
        }
      }

      .video {
        // width: 888px;
        width: 95%;
        height: 470px;
        margin: 0 auto;
        border: 1px solid #45777a;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &__chart {
    width: 1888px;
    height: 470px;
    margin: 16px auto;
    background-color: #303136;
    border-radius: 8px;
    .front {
      width: 100%;
      padding-top: 24px;
    }

    .chart-box {
      width: 100%;
      height: 400px;
      &__left,
      &__right {
        min-width: 50%;
        height: 100%;
        // border: 1px solid #efefef;
      }
    }
  }
}
.title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}
.container__content__opration {
  padding: 0 24px;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #3b3e42;
  background: #303136;
  border-radius: 8px;

  .select-type {
    span {
      padding: 0 24px;
      color: #949ba4;
      font-size: 14px;
    }
  }

  .opration-btn {
    span {
      display: inline-block;
      width: 88px;
      height: 36px;
      line-height: 36px;
      border-radius: 4px;
      cursor: pointer;
    }

    &__reserve {
      border: 1px solid #5cfbff;
      color: #5cfbff;
      margin-right: 24px;
    }

    &__search {
      background-color: #5cfbff;
      color: #17181a;
    }
  }
}
</style>